/**
 * Created by YJH on 2018/5/24.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Image,
    DeviceEventEmitter,
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';
import Toast, {DURATION} from 'react-native-easy-toast';
import MinePage from '../mine/MinePage'
import PopularPage from './PopularPage'
import FavoritePage from '../favorite/FavoritePage';
import TrendingPage from '../trending/TrendingPage';
import BasePage from './BasePage';
export const FLAG_TAB={
    flag_popularTab:'tb_popular',
    flag_trendingTab:'tb_trending',
    flag_favoriteTab:'tb_favorite',
    flag_my:'tb_my'
};
export const ACTION_NOTIFY={toast:'showToast', changeTheme:'changeTheme'};
export default class HomePage extends BasePage {

    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Home',
            theme:this.props.theme,
        };
    }


    componentDidMount() {
        super.componentDidMount();
        //组件加载完成之后，注册通之
        this.listener = DeviceEventEmitter.addListener('ACTION_HOME', (action, params) => {
            this.onAction(action, params)
        })

    }

    onAction(action, params){
        if(action === ACTION_NOTIFY.toast){
            this.toast.show(params.text, DURATION.LENGTH_SHORT);
        }
    }


    componentWillUnmount() {
        super.componentWillUnmount();
        this.listener && this.listener.remove();
    }

    render() {
        return (
            <View style={styles.container}>
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Home'}
                        title="最热"
                        selectedTitleStyle={this.state.theme.styles.selectedTitleStyle}
                        renderIcon={() => <Image
                            style={styles.tab_image}
                            source={require('../../../res/images/ic_polular.png')}/>}
                        renderSelectedIcon={() => <Image style={[styles.tab_image, this.state.theme.styles.tabBarSelectedIcon]}
                                                         source={require('../../../res/images/ic_polular.png')}/>}
                        // badgeText="99"
                        onPress={() => this.setState({selectedTab: 'Home'})}>
                        <View style={styles.page1}>
                            <PopularPage hTheme={this.state.theme} {...this.props}/>
                        </View>
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Trend'}
                        title="热搜"
                        selectedTitleStyle={this.state.theme.styles.selectedTitleStyle}
                        renderIcon={() => <Image style={styles.tab_image}
                                                 source={require('../../../res/images/ic_trending.png')}/>}
                        renderSelectedIcon={() => <Image style={[styles.tab_image, this.state.theme.styles.tabBarSelectedIcon]}
                                                         source={require('../../../res/images/ic_trending.png')}/>}
                        onPress={() => this.setState({selectedTab: 'Trend'})}>
                        <View style={styles.page2}><TrendingPage hTheme={this.state.theme} {...this.props}/></View>
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Favorite'}
                        title="收藏"
                        selectedTitleStyle={this.state.theme.styles.selectedTitleStyle}
                        renderIcon={() => <Image
                            style={styles.tab_image}
                            source={require('../../../res/images/ic_favorite.png')}/>}
                        renderSelectedIcon={() => <Image style={[styles.tab_image, this.state.theme.styles.tabBarSelectedIcon]}
                                                         source={require('../../../res/images/ic_favorite.png')}/>}
                        onPress={() => this.setState({selectedTab: 'Favorite'})}>
                        <View style={styles.page3}>
                            <FavoritePage hTheme={this.state.theme} {...this.props}/>
                        </View>
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Mine'}
                        title="我的"
                        selectedTitleStyle={this.state.theme.styles.selectedTitleStyle}
                        renderIcon={() => <Image style={styles.tab_image}
                                                 source={require('../../../res/images/ic_my.png')}/>}
                        renderSelectedIcon={() => <Image style={[styles.tab_image, this.state.theme.styles.tabBarSelectedIcon]}
                                                         source={require('../../../res/images/ic_my.png')}/>}
                        onPress={() => this.setState({selectedTab: 'Mine'})}>
                        <View style={styles.page4}>
                            <MinePage hTheme={this.state.theme} {...this.props}/>
                        </View>
                    </TabNavigator.Item>
                </TabNavigator>
                <Toast ref={toast => this.toast = toast}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    boy_text: {
        fontSize: 18,
        color: 'black',
        alignSelf: 'center',
    },
    page1: {
        flex: 1,
        backgroundColor: 'white',
    },
    page2: {
        flex: 1,
        backgroundColor: 'white',
    },
    page3: {
        flex: 1,
        backgroundColor: 'white',
    },
    page4: {
        flex: 1,
        backgroundColor: 'white',
    },
    tab_image: {
        width: 20,
        height: 20,
    },
});